<template>
  <div class="content-container" ref="container" @mousemove="handelMouseMove" @mouseleave="handelMouseLeave">
   
      <imga :src="dataItem.bigImg" :placeholder="dataItem.midImg" @load="loaded" ref="image"  :style="showstyle"/>
    <div class="title" ref="title">{{ dataItem.title }}</div>
    <div class="desc" ref="desc">{{ dataItem.description }}</div>
  </div>
</template>

<script>
import imga from '@/components/Imageloader';
export default {
  data(){
    return {
      thetitleWidth:0,//用于实现文字过度效果
      thedescWidth:0,
      thecontainer:null,//存放容器宽高
      theimage:null,//图片宽高
      mousex:0,//鼠标相对于容器的宽高
      mousey:0,
    }
  },
  components:{
    imga,
  },
  props:['dataItem'],
  computed:{
    showstyle(){
      
      if(!this.thecontainer||!this.theimage){
        // console.log('容器',this.thecontainer,'图片',this.theimage);
        return ;
      }
      // console.log('运行');
      let extrax=this.theimage.width - this.thecontainer.width;
      // console.log(this.theimage.height)
      let extray=this.theimage.height - this.thecontainer.height;
      const left=-extrax/this.thecontainer.width*this.mousex;
      const top=-extray/this.thecontainer.height*this.mousey;
      // console.log(extrax,extray);
      return {
        transform:`translate(${left}px, ${top}px)`,
      };
    },
    center(){
      return {
        x:this.thecontainer.width/2,
        y:this.thecontainer.height/2
      }
    }
  },
  mounted(){
    this.thetitleWidth=this.$refs.title.clientWidth+'px';
    this.thedescWidth=this.$refs.desc.clientWidth+'px';
    // console.log(this.thetitleWidth,this.thedescWidth);  

    this.theSizeChange();
    this.mousex=this.center.x;
      this.mousey=this.center.y;
    window.addEventListener("resize",this.theSizeChange);
    // console.log(this.thecontainer);
  },
  destroyed(){
    window.removeEventListener("resize",this.theSizeChange);
  },
  methods:{
    showmsg(){
      this.$refs.desc.style.opacity=1;
      this.$refs.title.style.opacity=1;
      this.$refs.title.style.width=0;
      this.$refs.desc.style.width=0;
      this.$refs.desc.clientHeight;//强行渲染

      
      this.$refs.desc.style.width=this.thedescWidth;
      this.$refs.title.style.width=this.thetitleWidth;

    },
    loaded(){
      this.showmsg();//等待图片加载出来再显示文字
    },
    theSizeChange(){
      this.thecontainer={
      width:this.$refs.container.clientWidth,
      height:this.$refs.container.clientHeight,
      };
      this.theimage={
      width:this.$refs.image.$el.clientWidth,
      height:this.$refs.image.$el.clientHeight,
      }
    //  console.log('sdhbcsjb xjb',this.thecontainer,this.theimage);
    },
    handelMouseMove(e){
     const rect= this.$refs.container.getBoundingClientRect();
      this.mousex=e.clientX-rect.left;
      this.mousey=e.clientY-rect.top;
      // console.log(this.mousex,this.mousey);
    },
    handelMouseLeave(){
      this.mousex=this.center.x;
      this.mousey=this.center.y;
    }
  }
}
</script>

<style lang="less" scoped>
.content-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;


  .title,.desc{
    position: absolute;
    left:5%;
    text-shadow: 1px 0 2px rgba(0,0,0,0.5),-1px 0 2px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5), 0 -1px 2px rgba(0,0,0,0.5);
    opacity: 0;
    overflow: hidden;
    letter-spacing: 3px;
    white-space: nowrap;
  }
  .title{
    top:calc(70% - 40px);
    font-size: 2em;
    transition: 1s;
  }
  .desc{
    top:calc(70% + 20px);
    font-size: 1.2em;
    transition: 1s 1s;
  }
}
</style>